<template>
  <div>
    <el-dialog
      title="查看"
      ref="tableDialog"
      :visible="dialogVisible"
      width="80%"
      v-if="data"
      @close="close"
    >
      <el-form :model="data" label-width="100px" ref="form">
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请人">{{data.userName}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="所在单位">{{data.companyName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请时间">{{data.createtime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="用车人数">{{data.pcount}}人</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="24">
            <el-form-item label="用车理由">{{data.reason}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="开始时间">{{data.starttime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="结束时间">{{data.endtime}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="始发地">{{data.origin}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="目的地">{{data.destination}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="24">
            <el-form-item label="申请备注">{{data.mark}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="24">
            <el-form-item label="状态">{{data.processType}}</el-form-item>
          </el-col>
        </el-row>

        <template v-if="data.driverId">
          <el-divider>调度信息</el-divider>
          <el-row>
            <el-col :sm="12">
              <el-form-item label="司机姓名">{{data.driverName}}</el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item label="车辆">{{data.carName}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item label="接送时间">{{data.jstime}}</el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item label="接送地点">{{data.jsaddress}}</el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-row>
          <el-col :sm="2">
            <el-form-item label="历史流程"></el-form-item>
          </el-col>
          <el-col :sm="history.length*6>18?18:history.length*6">
            <div style="overflow: hidden;">
              <el-steps :active="history.length-1" align-center>
                <el-step
                  :title="item.taskName+(item.passStr||'')"
                  v-for="(item, index) in history"
                  :key="index"
                >
                  <div slot="description">
                    <span style="white-space: nowrap;">操作人：{{item.userName}}</span>
                    <br />
                    <span style="white-space: nowrap;">{{item.optime}}</span>
                    <br />
                    备注：{{item.mark||' - '}}
                  </div>
                </el-step>
              </el-steps>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left;">
        <el-button @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: null
    },
    history: {
      type: Array,
      default: []
    },

    dialogVisible: {
      type: Boolean,
      default: true
    }
  },
  methods:{
      close(){
          this.$emit("update:dialogVisible",false)
      }
  }
};
</script>